<template>
	<div class="container">
		<div class="send-mode" v-if="showMode && !id">
			<!-- <div class="bg-my" :style="'height: ' + bgHeight + 'px;'"></div> -->
			<image class="bg-my" :style="'height: ' + bgHeight + 'px;'" src="/static/icons/send-bg.png" mode=""></image>
			<div class="nav-block">
				<div class="nav-item" @click="changeMode(2)">
					<div class="left">
						<image src="../../static/icons/send1.png" mode=""></image>
					</div>
					<div class="right">
						<div class="title">发商品</div>
						<div class="desc">发布定制的商品赚大钱</div>
					</div>
					<image class="arrow" src="/static/icons/arrow-right.png" mode=""></image>
				</div>
				<div class="nav-item" @click="changeMode(1)">
					<div class="left">
						<image src="../../static/icons/send2.png" mode=""></image>
					</div>
					<div class="right">
						<div class="title">晒好物</div>
						<div class="desc">特别的好物，只晒不卖</div>
					</div>
					<image class="arrow" src="/static/icons/arrow-right.png" mode=""></image>
				</div>
			</div>
		</div>
		<navigationBar :leftTitle="type == 2? '发布商品':'晒好物'" :isCustomBack="true" @back="back"></navigationBar>
		<div class="content" :style="'padding-top: ' + (navigationBarHeight) + 'px;'">
			<view class="con">
				<movable-area class="area" :style="{ height: areaHeight }" @mouseenter="mouseenter"
					@mouseleave="mouseleave">
					<block v-for="(item, index) in imageList" :key="item.id">
						<movable-view class="view" :x="item.x" :y="item.y" direction="all" :damping="40"
							:disabled="item.disable" @change="onChange($event, item)" @touchstart="touchstart(item)"
							@mousedown="touchstart(item)" @touchend="touchend(item)" @mouseup="touchend(item)"
							:style="{ width: viewWidth + 'px', height: viewWidth + 'px', 'z-index': item.zIndex, opacity: item.opacity }">
							<view class="area-con"
								:style="{ width: childWidth, height: childWidth, transform: 'scale(' + item.scale + ')' }">
								<!-- <image class="pre-image" :src="item.filePath" mode="aspectFill"></image> -->
								<video class="pre-image" objectFit='cover'
									v-if="item.fileSuffix !== 'png' && item.fileSuffix !== 'jpg' && item.fileSuffix !== 'jpge'"
									:src="item.filePath" :id="'video'+index" @error="videoErrorCallback"
									show-fullscreen-btn="true" controls @fullscreenchange="fullscreenchange"
									@play="openVideo(index)"></video>
								<image class="pre-image"
									v-if="item.fileSuffix == 'png' || item.fileSuffix == 'jpg' || item.fileSuffix == 'jpge'"
									:src="item.filePath" mode="aspectFill" @click="_previewImage(item.filePath)">
								</image>
								<view class="del-con" @click="delImage(item, index)"
									@touchstart.stop="delImageMp(item, index)" @touchend.stop="nothing()"
									@mousedown.stop="nothing()" @mouseup.stop="nothing()">
									<view class="del-wrap">
										<image class="del-image"
											src="">
										</image>
									</view>
								</view>
							</view>
						</movable-view>
					</block>
					<view class="add" v-if="imageList.length < number"
						:style="{ top: add.y, left: add.x, width: viewWidth + 'px', height: viewWidth + 'px' }"
						@click="addImages">
						<view class="add-wrap" :style="{ width: childWidth, height: childWidth }">
							<image style="width: 100%;height: 100%;" mode="aspectFill" :lazy-load="true"
								src="/static/icons/upload2.png"></image>
						</view>
					</view>
				</movable-area>
			</view>
			<!-- 	<div class="upload-list" style="padding-top: 30rpx;">
				<div class="upload-item" v-for="(item,index) in wordList" :key="index">
					<image class="del" src="/static/icon/icon_shanchu2.png" mode="" @click="del(index)"></image>
					<video objectFit='cover'
						v-if="item.fileSuffix !== 'png' && item.fileSuffix !== 'jpg' && item.fileSuffix !== 'jpge'"
						:src="item.filePath" :id="'video'+index" @error="videoErrorCallback" show-fullscreen-btn="true"
						controls @fullscreenchange="fullscreenchange" @play="openVideo(index)"></video>
					<image v-if="item.fileSuffix == 'png' || item.fileSuffix == 'jpg' || item.fileSuffix == 'jpge'"
						:src="item.filePath" mode="aspectFill" @click="_previewImage(item.filePath)"></image>
				</div>
				<div class="upload-item">
					<image mode="aspectFill" :lazy-load="true" src="/static/icons/upload2.png" alt=""
						@click="handlerUpload()" />
				</div>
			</div> -->
			<div class="nav-list">
				<div class="nav-item">
					<div class="left">标题</div>
					<div class="right">
						<input type="text" v-model="formData.title" placeholder="填写标题会有更多赞哦～" />
					</div>
				</div>
				<div class="remarks">
					<div class="remarks-title">正文</div>
					<textarea v-model="formData.content" :maxlength="-1" :auto-height="true"
						placeholder="添加正文"></textarea>
				</div>
				<div class="nav-item" v-if="type == 2">
					<div class="left">价格</div>
					<div class="right">
						<input type="digit" v-model="formData.price" placeholder="填写价格" />
					</div>
				</div>
				<div class="nav-item" v-if="type == 2">
					<div class="left">是否包邮</div>
					<div class="right2">
						<evanSwitch v-model="formData.freeShipping" style="transform:scale(0.6)" />
					</div>
				</div>
				<div class="nav-item" v-if="type == 2 && !formData.freeShipping">
					<div class="left">运费</div>
					<div class="right">
						<input type="digit" v-model="formData.shippingPrice" placeholder="填写运费" />
					</div>
				</div>
				<div class="nav-item" v-if="type == 2">
					<div class="left">是否开启分销</div>
					<div class="right2">
						<evanSwitch v-model="formData.enableDistribution" style="transform:scale(0.6)" />
					</div>
				</div>
				<div class="nav-item" v-if="type == 2">
					<div class="left">是否可用优惠券</div>
					<div class="right2">
						<evanSwitch v-model="formData.usingCoupon" style="transform:scale(0.6)" />
					</div>
				</div>
				<div class="nav-item" v-if="type == 2 && formData.usingCoupon">
					<div class="left">优惠券</div>
					<div class="right">
						<input type="digit" v-model="formData.couponAmount" placeholder="填写优惠券金额" />
					</div>
				</div>
				<div class="nav-item" v-if="type == 0">
					<div class="left">是否开启分销</div>
					<div class="right2">
						<evanSwitch v-model="formData.enableDistribution" style="transform:scale(0.6)" />
					</div>
				</div>
				<div class="nav-item">
					<div class="left">联系电话</div>
					<div class="right">
						<input type="number" v-model="formData.phone" placeholder="手机号码" />
					</div>
				</div>
			</div>
			<div class="tab-wrapper">
				<div class="tab-title">
					#话题
					<div class="tips-add" @click="setTopic()">
						<span>添加</span>
						<image src="../../static/icons/upload.png" mode=""></image>
					</div>

				</div>
				<div class="tag-list">
					<div class="tag-item" @click="chooseTopic(item)" :class="topicList.includes(item.id)?'active':''"
						v-for="(item,index) in topic" :key="index">#{{item.name}}
						<image class="tag-del" src="/static/icon/icon_shanchu2.png" mode="" @click="delTag(item,index)">
						</image>
					</div>
				</div>
			</div>
			<div class="nav-list">
				<div class="nav-item" @click="toMap">
					<div class="left">
						<image class="icon" src="/static/icons/add-location.png" mode=""></image>
						<span class="address">{{formData.address || '添加地点'}}</span>
					</div>
					<image class="arrow" src="/static/icons/arrow-right.png" mode=""></image>
				</div>
				<picker @change="watchChange" :value="watchIndex" :range="watchType" range-key="name">
					<div class="nav-item">
						<div class="left">
							<image class="icon" src="/static/icons/clock.png" mode="aspectFill"></image>
							<span class="address"
								:class="[watchIndex == 2?'red':'']">{{watchType[watchIndex].name}}</span>
						</div>
						<div class="user-list">
							<div class="user-item" v-for="(item,index) in mentionedFriends" :key="index">
								<div class="red">{{index !== 0? '、':''}}{{item.nickname}}</div>
							</div>
						</div>
						<image class="arrow" src="/static/icons/arrow-right.png" mode=""></image>
					</div>
				</picker>
				<div class="nav-item">
					<div class="left">定时发布</div>
					<div class="right2">
						<evanSwitch v-model="formData.scheduledRelease" style="transform:scale(0.6)" />
					</div>
				</div>
				<div class="nav-item" v-if="formData.scheduledRelease">
					<div class="left">
						<span>定时发布时间</span>
					</div>
					<div class="right-flex-none" @click="openDatetimePicker">{{birthday}}
						<image class="icon" src="/static/icons/calendar.png" mode=""></image>
					</div>
				</div>
			</div>
			<div class="footer-send">
				<div class="send-setting">
					<div class="send-item" @click="toDraft()">
						<image src="/static/icons/caogao.png" mode=""></image>
						<span>存草稿</span>
					</div>
					<div class="send-item" @click="toPreview()">
						<image src="/static/icons/see.png" mode=""></image>
						<span>预览</span>
					</div>
				</div>
				<div class="want" @click="sendInfo" v-if="!loading">
					发布笔记
				</div>
			</div>
			<dataTimePicker ref="myPicker" @submit="handleSubmit" :time-label="['年', '月', '日', '时', '分']" />
			<uni-popup ref="price" type="center" :maskClick="true">
				<div class="setPrice">
					<div class="price-title">红包设置</div>
					<div class="wrap-input">
						<input type="digit" value="" placeholder-style="font-size: 20rpx;color: #BCBCBC;"
							placeholder="请输入红包个数" />
					</div>
					<div class="vice-title">最大设置1000000</div>
					<div class="wrap-input">
						<input type="digit" value="" placeholder-style="font-size: 20rpx;color: #BCBCBC;"
							placeholder="请输入红包金额" />
					</div>
					<div class="vice-title">每个红包最多200元</div>
					<div class="pay">
						共支付：<span>20000元</span>
					</div>
					<div class="bottom">
						<span class="cannel">取消</span>
						<span class="yes on">确定</span>
					</div>
				</div>
			</uni-popup>
		</div>
		<!-- 添加话题 -->
		<uni-popup ref="topic" type="center" :maskClick="true">
			<div class="setPrice">
				<div class="price-title">添加话题</div>
				<div class="wrap-input">
					<input type="text" v-model="topic_title" placeholder-style="font-size: 25rpx;color: #BCBCBC;"
						placeholder="请输入话题" />
				</div>
				<div class="bottom">
					<span class="cannel" @click="closePop()">取消</span>
					<span class="yes on" @click="addTopic()">确定</span>
				</div>
			</div>
		</uni-popup>
		<!-- @好友弹窗 -->
		<userPopup ref="userPop" :selected="mentionedFriends" @getUser="selectFriend">
		</userPopup>
	</div>
</template>

<script>
	import data from '@/js/my/send/data.js';
	import methods from '@/js/my/send/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import dataTimePicker from "@/components/datetime-picker.vue";
	import evanSwitch from "@/components/evan-switch.vue";
	import userPopup from "@/components/user-popup.vue";
	export default {
		data,
		methods,
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.getData(e.id)
			} else {
				this.getLocation()
			}
			this.getAllTopic()

		},
		onShow() {
			this.startYear = new Date().getFullYear();
			this.$nextTick(() => {
				this.$refs.myPicker._onSubmit()
			})
		},
		onHide() {},
		components: {
			navigationBar,
			uniPopup,
			dataTimePicker,
			evanSwitch,
			userPopup
		},
		created() {
			this.width = uni.getSystemInfoSync().windowWidth
			this.viewWidth = this.rpx2px(this.imageWidth)
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this)
			query.select('.area').boundingClientRect(data => {
				this.colsValue = Math.floor(data.width / this.viewWidth)
				if (this.cols > 0) {
					this.colsValue = this.cols
					this.viewWidth = data.width / this.cols
				}
			})
			query.exec()
		},
		computed: {
			...mapState(['navigationBarHeight', 'userInfo']),
			bgHeight() {
				// #ifdef APP-PLUS
				return 300
				// #endif
				return this.navigationBarHeight + uni.upx2px(300);
			},
			areaHeight() {
				if (this.imageList.length < this.number) {
					return Math.ceil((this.imageList.length + 1) / this.colsValue) * this.viewWidth + 'px'
				} else {
					return Math.ceil(this.imageList.length / this.colsValue) * this.viewWidth + 'px'
				}
			},
			childWidth() {
				return this.viewWidth - this.rpx2px(this.padding) * 2 + 'px'
			},
		}
	};
</script>
<style>
	page,
	uni-page {
		background-color: rgb(250, 250, 250) !important;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/my/send.scss';
</style>